// 导入React核心功能
import React, { useState, useRef, useCallback } from 'react';
import './AiMatting.css';

/**
 * 图片变换接口 - 定义图片的缩放、旋转和裁剪参数
 */
interface ImageTransform {
  scale: number;        // 缩放比例 (0.1-3.0)
  rotate: number;       // 旋转角度 (-180° 到 180°)
  crop: {
    x: number;          // 裁剪起始X坐标 (百分比)
    y: number;          // 裁剪起始Y坐标 (百分比)
    width: number;      // 裁剪宽度 (百分比)
    height: number;     // 裁剪高度 (百分比)
  };
}

/**
 * 背景设置接口 - 定义背景的类型和参数
 */
interface BackgroundSettings {
  type: 'color' | 'image' | 'template';  // 背景类型：纯色、图片、模板
  color: string;                          // 纯色背景的颜色值
  image: string | null;                   // 自定义背景图片的URL
  template: string | null;                // 系统背景模板的ID
}

/**
 * 抠图结果接口 - 存储AI抠图的处理结果
 */
interface MattingResult {
  originalImage: string;    // 原始图片URL
  processedImage: string;   // 处理后的图片URL
  mask: string;            // 生成的掩码图片URL
  confidence: number;      // 处理置信度 (0-1)
  processingTime: number;  // 处理耗时 (毫秒)
}

function Index() {
  // ===== 核心状态管理 =====
  
  // 用户选择的图片URL
  const [selectedImage, setSelectedImage] = useState<string | null>(null);
  
  // 是否正在处理中
  const [isProcessing, setIsProcessing] = useState(false);
  
  // 抠图处理结果图片URL
  const [resultImage, setResultImage] = useState<string | null>(null);
  
  // 完整的抠图结果数据
  const [mattingResult, setMattingResult] = useState<MattingResult | null>(null);
  
  // 当前处理类型：AI抠图 或 快速扣除背景
  const [processingType, setProcessingType] = useState<'matting' | 'quick-remove' | null>(null);
  
  // 是否显示成功消息
  const [showSuccessMessage, setShowSuccessMessage] = useState(false);
  
  // 背景是否已应用到抠图结果
  const [backgroundApplied, setBackgroundApplied] = useState(false);
  
  // ===== 编辑器状态 =====
  
  // 是否显示图片编辑器弹窗
  const [showImageEditor, setShowImageEditor] = useState(false);
  
  // 是否显示背景编辑器弹窗
  const [showBackgroundEditor, setShowBackgroundEditor] = useState(false);
  
  // 是否显示对比查看弹窗
  const [showComparison, setShowComparison] = useState(false);
  
  // ===== 图片变换参数 =====
  
  // 图片的变换参数（缩放、旋转、裁剪）
  const [imageTransform, setImageTransform] = useState<ImageTransform>({
    scale: 1,           // 默认缩放比例 100%
    rotate: 0,          // 默认旋转角度 0°
    crop: { 
      x: 0,             // 默认裁剪起始X 0%
      y: 0,             // 默认裁剪起始Y 0%
      width: 100,       // 默认裁剪宽度 100%
      height: 100       // 默认裁剪高度 100%
    }
  });
  
  // ===== 背景设置参数 =====
  
  // 背景设置参数
  const [backgroundSettings, setBackgroundSettings] = useState<BackgroundSettings>({
    type: 'color',      // 默认背景类型：纯色
    color: '#ffffff',   // 默认背景颜色：白色
    image: null,        // 自定义背景图片
    template: null      // 系统背景模板
  });
  
  // ===== 拖拽状态 =====
  
  // 是否正在拖拽文件
  const [isDragging, setIsDragging] = useState(false);
  
  // ===== DOM引用 =====
  
  // 文件上传输入框的引用
  const fileInputRef = useRef<HTMLInputElement>(null);
  
  // 背景图片上传输入框的引用
  const backgroundImageRef = useRef<HTMLInputElement>(null);
  
  // 用于图片处理的Canvas引用
  const canvasRef = useRef<HTMLCanvasElement>(null);

  // ===== 预设数据 =====
  
  /**
   * 系统背景模板 - 提供多种预设背景供用户选择
   * 每个模板包含：唯一ID、显示名称、背景图片URL
   */
  const backgroundTemplates = [
    { id: 'gradient-blue', name: '蓝色渐变', url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=300&q=80' },
    { id: 'gradient-purple', name: '紫色渐变', url: 'https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=300&q=80' },
    { id: 'gradient-green', name: '绿色渐变', url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=300&q=80' },
    { id: 'gradient-orange', name: '橙色渐变', url: 'https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=300&q=80' },
    { id: 'pattern-dots', name: '点状图案', url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=300&q=80' },
    { id: 'pattern-lines', name: '线条图案', url: 'https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=300&q=80' },
  ];

  /**
   * 测试样例图片 - 提供不同类型的测试图片供用户快速体验
   * 每个样例包含：名称、描述、图片URL
   */
  const testSamples = [
    {
      name: '人物肖像',
      description: '清晰的人物面部，复杂背景',
      url: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=300&q=80'
    },
    {
      name: '风景照片',
      description: '自然风景，多层次的背景',
      url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=300&q=80'
    },
    {
      name: '物品特写',
      description: '产品摄影，简单背景',
      url: 'https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=300&q=80'
    },
    {
      name: '复杂场景',
      description: '多人场景，复杂环境',
      url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?auto=format&fit=crop&w=300&q=80'
    }
  ];

  // ===== 工具函数 =====
  
  /**
   * 加载测试样例图片
   * @param sampleUrl 测试样例的图片URL
   */
  const loadTestSample = (sampleUrl: string) => {
    setSelectedImage(sampleUrl);
    setResultImage(null);
    setMattingResult(null);
    setShowSuccessMessage(false);
    setBackgroundApplied(false); // 重置背景应用状态
  };

  // ===== AI抠图算法 =====
  
  /**
   * 执行AI抠图算法 - 高级版本
   * 使用多种图像分析技术：边缘检测、颜色分析、纹理分析
   * @param imageSrc 输入图片的URL
   * @returns Promise<MattingResult> 抠图结果
   */
  const performAIMatting = async (imageSrc: string): Promise<MattingResult> => {
    return new Promise((resolve) => {
      // 创建Canvas用于图像处理
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        // 如果无法获取2D上下文，返回原始图片
        resolve({
          originalImage: imageSrc,
          processedImage: imageSrc,
          mask: '',
          confidence: 0,
          processingTime: 0
        });
        return;
      }

      // 创建图片对象并加载
      const img = new Image();
      img.onload = () => {
        const startTime = Date.now();
        
        // 设置canvas尺寸与原图一致
        canvas.width = img.width;
        canvas.height = img.height;
        
        // 绘制原图到canvas
        ctx.drawImage(img, 0, 0);
        
        // 获取图像像素数据
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        
        // 创建掩码canvas用于存储抠图掩码
        const maskCanvas = document.createElement('canvas');
        const maskCtx = maskCanvas.getContext('2d');
        maskCanvas.width = canvas.width;
        maskCanvas.height = canvas.height;
        
        if (maskCtx) {
          // 创建掩码图像数据
          const maskData = maskCtx.createImageData(canvas.width, canvas.height);
          const maskPixels = maskData.data;
          
          // 执行高级主体检测算法
          const mask = detectSubjectAdvanced(data, canvas.width, canvas.height);
          
          // 应用掩码到原图，设置透明度
          for (let i = 0; i < data.length; i += 4) {
            const maskIndex = i / 4;
            const maskValue = mask[maskIndex];
            
            // 设置像素透明度（0-255）
            data[i + 3] = maskValue * 255;
            
            // 设置掩码像素值（黑白图像）
            maskPixels[i] = maskValue * 255;     // R
            maskPixels[i + 1] = maskValue * 255; // G
            maskPixels[i + 2] = maskValue * 255; // B
            maskPixels[i + 3] = 255;             // A
          }
          
          // 将处理后的图像数据应用到canvas
          ctx.putImageData(imageData, 0, 0);
          maskCtx.putImageData(maskData, 0, 0);
          
          // 计算处理时间
          const processingTime = Date.now() - startTime;
          
          // 返回处理结果
          resolve({
            originalImage: imageSrc,
            processedImage: canvas.toDataURL('image/png'),
            mask: maskCanvas.toDataURL('image/png'),
            confidence: calculateConfidence(mask),
            processingTime
          });
        }
      };
      img.src = imageSrc;
    });
  };

  /**
   * 执行快速抠图算法 - 简化版本
   * 使用简化的颜色分析，处理速度更快但精度较低
   * @param imageSrc 输入图片的URL
   * @returns Promise<MattingResult> 抠图结果
   */
  const performQuickMatting = async (imageSrc: string): Promise<MattingResult> => {
    return new Promise((resolve) => {
      // 创建Canvas用于图像处理
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      if (!ctx) {
        // 如果无法获取2D上下文，返回原始图片
        resolve({
          originalImage: imageSrc,
          processedImage: imageSrc,
          mask: '',
          confidence: 0,
          processingTime: 0
        });
        return;
      }

      // 创建图片对象并加载
      const img = new Image();
      img.onload = () => {
        const startTime = Date.now();
        
        // 设置canvas尺寸
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        
        // 获取图像像素数据
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        
        // 创建掩码canvas
        const maskCanvas = document.createElement('canvas');
        const maskCtx = maskCanvas.getContext('2d');
        maskCanvas.width = canvas.width;
        maskCanvas.height = canvas.height;
        
        if (maskCtx) {
          // 创建掩码图像数据
          const maskData = maskCtx.createImageData(canvas.width, canvas.height);
          const maskPixels = maskData.data;
          
          // 执行快速主体检测算法
          const mask = detectSubjectQuick(data, canvas.width, canvas.height);
          
          // 应用掩码到原图
          for (let i = 0; i < data.length; i += 4) {
            const maskIndex = i / 4;
            const maskValue = mask[maskIndex];
            
            // 设置像素透明度
            data[i + 3] = maskValue * 255;
            
            // 设置掩码像素值
            maskPixels[i] = maskValue * 255;     // R
            maskPixels[i + 1] = maskValue * 255; // G
            maskPixels[i + 2] = maskValue * 255; // B
            maskPixels[i + 3] = 255;             // A
          }
          
          // 应用处理后的图像数据
          ctx.putImageData(imageData, 0, 0);
          maskCtx.putImageData(maskData, 0, 0);
          
          // 计算处理时间
          const processingTime = Date.now() - startTime;
          
          // 返回处理结果
          resolve({
            originalImage: imageSrc,
            processedImage: canvas.toDataURL('image/png'),
            mask: maskCanvas.toDataURL('image/png'),
            confidence: calculateConfidence(mask),
            processingTime
          });
        }
      };
      img.src = imageSrc;
    });
  };

  // ===== 图像分析算法 =====
  
  /**
   * 高级主体检测算法
   * 结合边缘检测、颜色分析、纹理分析等多种技术
   * @param data 图像像素数据 (RGBA格式)
   * @param width 图像宽度
   * @param height 图像高度
   * @returns number[] 掩码数组，值范围0-1
   */
  const detectSubjectAdvanced = (data: Uint8ClampedArray, width: number, height: number): number[] => {
    // 初始化掩码数组，所有像素初始值为0（背景）
    const mask = new Array(width * height).fill(0);
    
    // 1. 边缘检测 - 识别图像中的边缘和轮廓
    const edges = detectEdges(data, width, height);
    
    // 2. 颜色分析 - 分析像素颜色与整体颜色的差异
    const colorScores = analyzeColors(data, width, height);
    
    // 3. 纹理分析 - 分析局部纹理特征
    const textureScores = analyzeTexture(data, width, height);
    
    // 4. 组合特征 - 将三种分析结果加权组合
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const index = y * width + x;
        
        // 获取三种分析的得分
        const edgeScore = edges[index];
        const colorScore = colorScores[index];
        const textureScore = textureScores[index];
        
        // 加权组合：边缘30% + 颜色40% + 纹理30%
        const probability = edgeScore * 0.3 + colorScore * 0.4 + textureScore * 0.3;
        
        // 应用阈值：概率大于0.5认为是前景，否则为背景
        mask[index] = probability > 0.5 ? probability : 0;
      }
    }
    
    // 5. 形态学处理 - 清理噪点，平滑边缘
    return morphologicalCleanup(mask, width, height);
  };

  /**
   * 快速主体检测算法
   * 使用简化的颜色分析，处理速度快但精度较低
   * @param data 图像像素数据 (RGBA格式)
   * @param width 图像宽度
   * @param height 图像高度
   * @returns number[] 掩码数组，值范围0-1
   */
  const detectSubjectQuick = (data: Uint8ClampedArray, width: number, height: number): number[] => {
    // 初始化掩码数组
    const mask = new Array(width * height).fill(0);
    
    // 简化的颜色分析 - 逐像素处理
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        // 计算像素在数据数组中的索引
        const index = (y * width + x) * 4;
        
        // 获取RGB值
        const r = data[index];
        const g = data[index + 1];
        const b = data[index + 2];
        
        // 计算灰度值
        const gray = (r + g + b) / 3;
        
        // 计算颜色方差 - 衡量RGB各通道与灰度值的差异
        const colorVariance = Math.sqrt(
          Math.pow(r - gray, 2) + Math.pow(g - gray, 2) + Math.pow(b - gray, 2)
        );
        
        // 简单的阈值检测：颜色方差大于30认为是前景
        mask[y * width + x] = colorVariance > 30 ? 1 : 0;
      }
    }
    
    return mask;
  };

  // 边缘检测
  /**
   * 边缘检测算法
   * 使用Sobel算子检测图像中的边缘和轮廓
   * @param data 图像像素数据 (RGBA格式)
   * @param width 图像宽度
   * @param height 图像高度
   * @returns number[] 边缘强度数组，值范围0-1
   */
  const detectEdges = (data: Uint8ClampedArray, width: number, height: number): number[] => {
    // 初始化边缘强度数组
    const edges = new Array(width * height).fill(0);
    
    // 遍历图像像素（跳过边界像素）
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const index = y * width + x;
        
        // 初始化梯度变量
        let gx = 0, gy = 0;
        
        // 使用3x3卷积核计算梯度
        for (let dy = -1; dy <= 1; dy++) {
          for (let dx = -1; dx <= 1; dx++) {
            // 计算邻域像素索引
            const neighborIndex = ((y + dy) * width + (x + dx)) * 4;
            
            // 计算邻域像素的灰度值
            const gray = (data[neighborIndex] + data[neighborIndex + 1] + data[neighborIndex + 2]) / 3;
            
            // Sobel算子的X方向梯度计算
            if (dx === -1 && dy === -1) { gx -= gray; gy -= gray; }
            else if (dx === 0 && dy === -1) gy -= 2 * gray;
            else if (dx === 1 && dy === -1) { gx += gray; gy -= gray; }
            else if (dx === -1 && dy === 0) gx -= 2 * gray;
            else if (dx === 1 && dy === 0) gx += 2 * gray;
            else if (dx === -1 && dy === 1) { gx -= gray; gy += gray; }
            else if (dx === 0 && dy === 1) gy += 2 * gray;
            else if (dx === 1 && dy === 1) { gx += gray; gy += gray; }
          }
        }
        
        // 计算梯度幅值
        const magnitude = Math.sqrt(gx * gx + gy * gy);
        
        // 归一化到0-1范围
        edges[index] = Math.min(1, magnitude / 255);
      }
    }
    
    return edges;
  };

  /**
   * 颜色分析算法
   * 分析每个像素与图像平均颜色的差异
   * @param data 图像像素数据 (RGBA格式)
   * @param width 图像宽度
   * @param height 图像高度
   * @returns number[] 颜色差异得分数组，值范围0-1
   */
  const analyzeColors = (data: Uint8ClampedArray, width: number, height: number): number[] => {
    // 初始化颜色得分数组
    const colorScores = new Array(width * height).fill(0);
    
    // 计算图像的整体统计信息
    let totalR = 0, totalG = 0, totalB = 0;
    for (let i = 0; i < data.length; i += 4) {
      totalR += data[i];
      totalG += data[i + 1];
      totalB += data[i + 2];
    }
    
    // 计算平均RGB值
    const avgR = totalR / (data.length / 4);
    const avgG = totalG / (data.length / 4);
    const avgB = totalB / (data.length / 4);
    
    // 分析每个像素的颜色差异
    for (let y = 0; y < height; y++) {
      for (let x = 0; x < width; x++) {
        const index = (y * width + x) * 4;
        // 获取当前像素的RGB值
        const r = data[index];
        const g = data[index + 1];
        const b = data[index + 2];
        
        // 计算与平均颜色的欧几里得距离
        const colorDiff = Math.sqrt(
          Math.pow(r - avgR, 2) + Math.pow(g - avgG, 2) + Math.pow(b - avgB, 2)
        );
        
        // 归一化颜色差异得分
        colorScores[y * width + x] = Math.min(1, colorDiff / 255);
      }
    }
    
    return colorScores;
  };

  /**
   * 纹理分析算法
   * 分析局部区域的纹理特征（方差）
   * @param data 图像像素数据 (RGBA格式)
   * @param width 图像宽度
   * @param height 图像高度
   * @returns number[] 纹理得分数组，值范围0-1
   */
  const analyzeTexture = (data: Uint8ClampedArray, width: number, height: number): number[] => {
    // 初始化纹理得分数组
    const textureScores = new Array(width * height).fill(0);
    
    // 遍历图像像素（跳过边界像素）
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        // 计算3x3邻域的统计信息
        let sum = 0, sumSq = 0, count = 0;
        
        // 遍历3x3邻域
        for (let dy = -1; dy <= 1; dy++) {
          for (let dx = -1; dx <= 1; dx++) {
            const neighborIndex = ((y + dy) * width + (x + dx)) * 4;
            
            // 计算邻域像素的灰度值
            const gray = (data[neighborIndex] + data[neighborIndex + 1] + data[neighborIndex + 2]) / 3;
            // 累加灰度值和平方值
            sum += gray;
            sumSq += gray * gray;
            count++;
          }
        }
        
        // 计算邻域的平均值和方差
        const mean = sum / count;
        const variance = (sumSq / count) - (mean * mean);
        
        // 归一化纹理得分
        textureScores[y * width + x] = Math.min(1, variance / 1000);
      }
    }
    
    return textureScores;
  };

  /**
   * 形态学清理算法
   * 使用简单的平滑操作清理掩码中的噪点
   * @param mask 原始掩码数组
   * @param width 图像宽度
   * @param height 图像高度
   * @returns number[] 清理后的掩码数组
   */
  const morphologicalCleanup = (mask: number[], width: number, height: number): number[] => {
    // 复制原始掩码数组
    const result = [...mask];
    
    // 简单的形态学操作 - 遍历图像像素（跳过边界）
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const index = y * width + x;
        
        // 计算3x3邻域的平均值
        let sum = 0, count = 0;
        for (let dy = -1; dy <= 1; dy++) {
          for (let dx = -1; dx <= 1; dx++) {
            const neighborIndex = (y + dy) * width + (x + dx);
            sum += mask[neighborIndex];
            count++;
          }
        }
        
        // 计算邻域平均值
        const avg = sum / count;
        
        // 平滑处理：当前像素70% + 邻域平均值30%
        result[index] = mask[index] * 0.7 + avg * 0.3;
      }
    }
    
    return result;
  };

  /**
   * 计算抠图置信度
   * 基于前景像素比例和掩码清晰度计算置信度
   * @param mask 掩码数组
   * @returns number 置信度值，范围0-1
   */
  const calculateConfidence = (mask: number[]): number => {
    // 计算前景像素数量（掩码值大于0.5的像素）
    const foregroundPixels = mask.filter(value => value > 0.5).length;
    const totalPixels = mask.length;
    
    // 计算前景像素比例
    const foregroundRatio = foregroundPixels / totalPixels;
    
    // 计算掩码的清晰度（边缘像素数量）
    let clarity = 0;
    for (let i = 0; i < mask.length; i++) {
      // 边缘像素：掩码值在0.1-0.9之间的像素
      if (mask[i] > 0.1 && mask[i] < 0.9) {
        clarity += 1;
      }
    }
    clarity /= totalPixels;
    
    // 置信度 = 前景比例60% + 清晰度40%
    return Math.min(1, (foregroundRatio * 0.6 + clarity * 0.4));
  };

  // ===== 事件处理函数 =====
  
  /**
   * 处理图片文件上传
   * @param event 文件上传事件
   */
  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      // 创建文件读取器
      const reader = new FileReader();
      reader.onload = (e) => {
        // 将文件转换为base64格式并设置到状态
        setSelectedImage(e.target?.result as string);
        setResultImage(null);
        setBackgroundApplied(false); // 重置背景应用状态
        
        // 重置图片变换参数
        setImageTransform({
          scale: 1,
          rotate: 0,
          crop: { x: 0, y: 0, width: 100, height: 100 }
        });
      };
      reader.readAsDataURL(file);
    }
  };

  /**
   * 处理背景图片上传
   * @param event 文件上传事件
   */
  const handleBackgroundImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        // 更新背景设置
        setBackgroundSettings(prev => ({
          ...prev,
          type: 'image',
          image: e.target?.result as string,
          template: null
        }));
      };
      reader.readAsDataURL(file);
    }
  };

  /**
   * 处理拖拽悬停事件
   * @param e 拖拽事件
   */
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  /**
   * 处理拖拽离开事件
   * @param e 拖拽事件
   */
  const handleDragLeave = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
  };

  /**
   * 处理文件拖拽放置事件
   * @param e 拖拽事件
   */
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    
    // 获取拖拽的文件列表
    const files = e.dataTransfer.files;
    if (files.length > 0) {
      const file = files[0];
      // 检查是否为图片文件
      if (file.type.startsWith('image/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
          setSelectedImage(e.target?.result as string);
          setResultImage(null);
          setBackgroundApplied(false); // 重置背景应用状态
          setImageTransform({
            scale: 1,
            rotate: 0,
            crop: { x: 0, y: 0, width: 100, height: 100 }
          });
        };
        reader.readAsDataURL(file);
      }
    }
  };

  /**
   * 处理粘贴事件 - 支持粘贴图片
   * @param e 粘贴事件
   */
  const handlePaste = useCallback((e: ClipboardEvent) => {
    const items = e.clipboardData?.items;
    if (items) {
      // 遍历剪贴板项目
      for (let i = 0; i < items.length; i++) {
        if (items[i].type.startsWith('image/')) {
          // 获取图片文件
          const file = items[i].getAsFile();
          if (file) {
            const reader = new FileReader();
            reader.onload = (e) => {
              setSelectedImage(e.target?.result as string);
              setResultImage(null);
              setImageTransform({
                scale: 1,
                rotate: 0,
                crop: { x: 0, y: 0, width: 100, height: 100 }
              });
            };
            reader.readAsDataURL(file);
          }
          break;
        }
      }
    }
  }, []);

  // 监听全局粘贴事件
  React.useEffect(() => {
    document.addEventListener('paste', handlePaste);
    return () => {
      document.removeEventListener('paste', handlePaste);
    };
  }, [handlePaste]);

  // ===== 图片变换处理函数 =====
  
  /**
   * 处理缩放参数变化
   * @param scale 缩放比例 (0.1-3.0)
   */
  const handleScaleChange = (scale: number) => {
    setImageTransform(prev => ({ ...prev, scale }));
  };

  /**
   * 处理旋转参数变化
   * @param rotate 旋转角度 (-180° 到 180°)
   */
  const handleRotateChange = (rotate: number) => {
    setImageTransform(prev => ({ ...prev, rotate }));
  };

  /**
   * 处理裁剪参数变化
   * @param crop 裁剪参数对象
   */
  const handleCropChange = (crop: ImageTransform['crop']) => {
    setImageTransform(prev => ({ ...prev, crop }));
  };

  // ===== 背景设置处理函数 =====
  
  /**
   * 处理背景类型变化
   * @param type 背景类型：'color' | 'image' | 'template'
   */
  const handleBackgroundTypeChange = (type: BackgroundSettings['type']) => {
    setBackgroundSettings(prev => ({ ...prev, type }));
  };

  /**
   * 处理背景颜色变化
   * @param color 背景颜色值
   */
  const handleBackgroundColorChange = (color: string) => {
    setBackgroundSettings(prev => ({ ...prev, color, type: 'color' }));
  };

  /**
   * 处理背景模板选择
   * @param template 模板ID
   */
  const handleBackgroundTemplateSelect = (template: string) => {
    setBackgroundSettings(prev => ({ 
      ...prev, 
      template, 
      type: 'template',
      image: null 
    }));
  };

  // ===== 图片处理核心函数 =====
  
  /**
   * 应用图片变换（缩放、旋转、裁剪）
   * 使用Canvas API对图片进行变换处理
   */
  const applyTransform = () => {
    if (!selectedImage || !canvasRef.current) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 创建图片对象
    const img = new Image();
    img.onload = () => {
      // 设置canvas尺寸与原图一致
      canvas.width = img.width;
      canvas.height = img.height;

      // 清空canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 保存当前绘图状态
      ctx.save();

      // 移动到canvas中心点
      ctx.translate(canvas.width / 2, canvas.height / 2);

      // 应用变换：缩放和旋转
      ctx.scale(imageTransform.scale, imageTransform.scale);
      ctx.rotate((imageTransform.rotate * Math.PI) / 180);

      // 绘制图片（以中心点为基准）
      ctx.drawImage(
        img,
        -img.width / 2,
        -img.height / 2,
        img.width,
        img.height
      );

      // 恢复绘图状态
      ctx.restore();

      // 应用裁剪
      const cropX = (imageTransform.crop.x / 100) * canvas.width;
      const cropY = (imageTransform.crop.y / 100) * canvas.height;
      const cropWidth = (imageTransform.crop.width / 100) * canvas.width;
      const cropHeight = (imageTransform.crop.height / 100) * canvas.height;

      // 创建新的canvas用于裁剪
      const croppedCanvas = document.createElement('canvas');
      const croppedCtx = croppedCanvas.getContext('2d');
      if (croppedCtx) {
        croppedCanvas.width = cropWidth;
        croppedCanvas.height = cropHeight;
        
        // 将裁剪区域绘制到新canvas
        croppedCtx.drawImage(
          canvas,
          cropX,
          cropY,
          cropWidth,
          cropHeight,
          0,
          0,
          cropWidth,
          cropHeight
        );
        
        // 转换为base64格式并更新状态
        const transformedImage = croppedCanvas.toDataURL('image/png');
        setSelectedImage(transformedImage);
        setShowImageEditor(false);
      }
    };
    img.src = selectedImage;
  };

  /**
   * 应用背景设置到抠图结果
   * 将背景与抠图结果结合，创建最终效果
   */
  const applyBackground = () => {
    if (!resultImage || !canvasRef.current) return;

    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    // 创建抠图结果图片对象
    const mattingImg = new Image();
    mattingImg.onload = () => {
      // 设置canvas尺寸
      canvas.width = mattingImg.width;
      canvas.height = mattingImg.height;

      // 清空canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 根据背景类型绘制背景
      if (backgroundSettings.type === 'color') {
        // 绘制纯色背景
        ctx.fillStyle = backgroundSettings.color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      } else if (backgroundSettings.type === 'image' && backgroundSettings.image) {
        // 绘制自定义背景图片
        const bgImg = new Image();
        bgImg.onload = () => {
          // 绘制背景图片
          ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
          // 绘制抠图结果（带透明背景）
          ctx.drawImage(mattingImg, 0, 0, canvas.width, canvas.height);
          
          const resultWithBackground = canvas.toDataURL('image/png');
          setResultImage(resultWithBackground);
          setBackgroundApplied(true);
          setShowBackgroundEditor(false);
        };
        bgImg.src = backgroundSettings.image;
        return;
      } else if (backgroundSettings.type === 'template' && backgroundSettings.template) {
        // 绘制系统背景模板
        const template = backgroundTemplates.find(t => t.id === backgroundSettings.template);
        if (template) {
          const bgImg = new Image();
          bgImg.onload = () => {
            // 绘制背景模板
            ctx.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
            // 绘制抠图结果（带透明背景）
            ctx.drawImage(mattingImg, 0, 0, canvas.width, canvas.height);
            
            const resultWithBackground = canvas.toDataURL('image/png');
            setResultImage(resultWithBackground);
            setBackgroundApplied(true);
            setShowBackgroundEditor(false);
          };
          bgImg.src = template.url;
          return;
        }
      }

      // 绘制抠图结果（带透明背景）
      ctx.drawImage(mattingImg, 0, 0, canvas.width, canvas.height);
      
      const resultWithBackground = canvas.toDataURL('image/png');
      setResultImage(resultWithBackground);
      setBackgroundApplied(true);
      setShowBackgroundEditor(false);
    };
    mattingImg.src = resultImage;
  };

  // ===== 主要操作函数 =====
  
  /**
   * 执行AI抠图操作
   * 使用高级算法进行精确抠图
   */
  const handleMatting = async () => {
    if (!selectedImage) return;
    
    // 设置处理状态
    setIsProcessing(true);
    setProcessingType('matting');
    setShowSuccessMessage(false);
    setBackgroundApplied(false); // 重置背景应用状态
    
    try {
      // 调用AI抠图算法
      const result = await performAIMatting(selectedImage);
      setMattingResult(result);
      setResultImage(result.processedImage);
      setShowSuccessMessage(true);
      
      // 3秒后自动隐藏成功消息
      setTimeout(() => {
        setShowSuccessMessage(false);
      }, 3000);
    } catch (error) {
      console.error('AI抠图处理失败:', error);
      // 降级处理：直接使用原图
      setResultImage(selectedImage);
    } finally {
      setIsProcessing(false);
      setProcessingType(null);
    }
  };

  /**
   * 执行快速背景扣除操作
   * 使用简化算法快速处理
   */
  const handleQuickBackgroundRemoval = async () => {
    if (!selectedImage) return;
    
    // 设置处理状态
    setIsProcessing(true);
    setProcessingType('quick-remove');
    setShowSuccessMessage(false);
    setBackgroundApplied(false); // 重置背景应用状态
    
    try {
      // 调用快速AI抠图算法
      const result = await performQuickMatting(selectedImage);
      setMattingResult(result);
      setResultImage(result.processedImage);
      setShowSuccessMessage(true);
      
      // 3秒后自动隐藏成功消息
      setTimeout(() => {
        setShowSuccessMessage(false);
      }, 3000);
    } catch (error) {
      console.error('快速抠图处理失败:', error);
      // 降级处理：直接使用原图
      setResultImage(selectedImage);
    } finally {
      setIsProcessing(false);
      setProcessingType(null);
    }
  };

  /**
   * 下载处理结果
   * 将结果图片保存到本地
   */
  const handleDownload = () => {
    if (!resultImage) return;
    
    // 创建下载链接
    const link = document.createElement('a');
    link.href = resultImage;
    link.download = 'ai-matting-result.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  /**
   * 打开图片编辑器
   */
  const openImageEditor = () => {
    setShowImageEditor(true);
  };

  /**
   * 打开背景编辑器
   */
  const openBackgroundEditor = () => {
    // 确保有抠图结果才能编辑背景
    if (!resultImage) {
      alert('请先进行抠图处理，然后才能调整背景');
      return;
    }
    setShowBackgroundEditor(true);
  };

  // ===== 组件渲染 =====
  
  return (
    <div className="ai-matting">
      {/* 页面标题区域 */}
      <div className="matting-header">
        <h1>AI 智能抠图</h1>
        <p>上传图片，AI自动识别并抠出主体，保留细节边缘</p>
      </div>

      {/* 测试样例区域 */}
      <div className="test-samples">
        <h3>测试样例</h3>
        <p>点击下方样例图片快速测试AI抠图效果</p>
        <div className="sample-grid">
          {testSamples.map((sample, index) => (
            <div 
              key={index}
              className="sample-item"
              onClick={() => loadTestSample(sample.url)}
            >
              <img src={sample.url} alt={sample.name} />
              <div className="sample-info">
                <h4>{sample.name}</h4>
                <p>{sample.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="matting-content">
        {/* 图片上传区域 */}
        <div className="upload-section">
          <div 
            className={`upload-area ${isDragging ? 'dragging' : ''}`}
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
          >
            <input
              ref={fileInputRef}
              type="file"
              id="image-upload"
              accept="image/*"
              onChange={handleImageUpload}
              style={{ display: 'none' }}
            />
            <label htmlFor="image-upload" className="upload-button">
              {selectedImage ? (
                // 已选择图片时的预览界面
                <div className="image-preview-container">
                  <img src={selectedImage} alt="上传的图片" className="preview-image" />
                  <div className="image-overlay">
                    <div className="overlay-buttons">
                      <button className="edit-btn" onClick={openImageEditor}>
                        ✏️ 编辑图片
                      </button>
                                        <button 
                    className="background-btn" 
                    onClick={openBackgroundEditor}
                    disabled={!resultImage}
                  >
                    🎨 调整背景
                  </button>
                    </div>
                  </div>
                </div>
              ) : (
                // 未选择图片时的上传提示
                <div className="upload-placeholder">
                  <div className="upload-icon">📁</div>
                  <p>点击上传图片</p>
                  <span>支持拖拽、粘贴图片，JPG、PNG 格式</span>
                </div>
              )}
            </label>
          </div>
          
          {/* 操作按钮区域 */}
          {selectedImage && (
            <div className="action-buttons">
              <button 
                className="matting-button"
                onClick={handleMatting}
                disabled={isProcessing}
              >
                {isProcessing ? '处理中...' : '开始抠图'}
              </button>
              <button 
                className="quick-remove-button"
                onClick={handleQuickBackgroundRemoval}
                disabled={isProcessing}
              >
                {isProcessing ? '处理中...' : '🚀 一键扣除背景'}
              </button>
              <button 
                className="edit-button"
                onClick={openImageEditor}
              >
                ✏️ 编辑图片
              </button>
              <button 
                className="background-button"
                onClick={openBackgroundEditor}
                disabled={!resultImage}
              >
                🎨 调整背景
              </button>
            </div>
          )}
        </div>

        {/* 处理状态显示 */}
        {isProcessing && (
          <div className={`processing ${processingType === 'quick-remove' ? 'quick-remove' : ''}`}>
            <div className="loading-spinner"></div>
            <p>
              {processingType === 'quick-remove' 
                ? 'AI正在快速扣除背景，请稍候...' 
                : 'AI正在处理中，请稍候...'
              }
            </p>
          </div>
        )}

        {/* 成功消息显示 */}
        {showSuccessMessage && (
          <div className="success-message">
            ✅ 背景扣除成功！图片已准备就绪
          </div>
        )}
        
        {/* 结果展示区域 */}
        {resultImage && (
          <div className="result-section">
            <h3>抠图结果</h3>
            
            {/* 处理统计信息 */}
            {mattingResult && (
              <div className="result-stats">
                <div className="stat-item">
                  <span className="stat-label">置信度:</span>
                  <span className="stat-value">{Math.round(mattingResult.confidence * 100)}%</span>
                </div>
                <div className="stat-item">
                  <span className="stat-label">处理时间:</span>
                  <span className="stat-value">{mattingResult.processingTime}ms</span>
                </div>
              </div>
            )}
            
            {/* 结果图片对比 */}
            <div className="result-images">
              <div className="result-image-container">
                <h4>原图</h4>
                <img src={mattingResult?.originalImage || selectedImage || ''} alt="原图" />
              </div>
              <div className={`result-image-container ${backgroundApplied ? 'matting-result' : ''}`}>
                <h4>
                  {backgroundApplied ? '抠图结果 + 背景' : '抠图结果'}
                  {backgroundApplied && <span className="status-badge">已应用背景</span>}
                </h4>
                <img src={resultImage} alt="抠图结果" />
              </div>
              {mattingResult?.mask && (
                <div className="result-image-container">
                  <h4>掩码</h4>
                  <img src={mattingResult.mask} alt="掩码" />
                </div>
              )}
            </div>
            
            {/* 结果操作按钮 */}
            <div className="result-actions">
              <button className="download-button" onClick={handleDownload}>
                下载结果
              </button>
              <button className="compare-button" onClick={() => setShowComparison(true)}>
                🔍 对比查看
              </button>
              {backgroundApplied && (
                <button 
                  className="reset-background-button"
                  onClick={() => {
                    if (mattingResult) {
                      setResultImage(mattingResult.processedImage);
                      setBackgroundApplied(false);
                    }
                  }}
                >
                  🔄 重置背景
                </button>
              )}
            </div>
          </div>
        )}
      </div>

      {/* 隐藏的Canvas元素 - 用于图片处理 */}
      <canvas ref={canvasRef} style={{ display: 'none' }} />

      {/* 图片编辑器弹窗 */}
      {showImageEditor && selectedImage && (
        <div className="image-editor-modal">
          <div className="editor-content">
            <div className="editor-header">
              <h3>图片编辑</h3>
              <button 
                className="close-btn"
                onClick={() => setShowImageEditor(false)}
              >
                ✕
              </button>
            </div>
            
            <div className="editor-main">
              {/* 图片预览区域 */}
              <div className="image-preview">
                <img 
                  src={selectedImage} 
                  alt="编辑预览" 
                  style={{
                    transform: `scale(${imageTransform.scale}) rotate(${imageTransform.rotate}deg)`,
                    transformOrigin: 'center'
                  }}
                />
              </div>
              
              {/* 编辑工具区域 */}
              <div className="editor-tools">
                {/* 缩放控制 */}
                <div className="tool-group">
                  <label>缩放: {Math.round(imageTransform.scale * 100)}%</label>
                  <input
                    type="range"
                    min="0.1"
                    max="3"
                    step="0.1"
                    value={imageTransform.scale}
                    onChange={(e) => handleScaleChange(parseFloat(e.target.value))}
                  />
                </div>
                
                {/* 旋转控制 */}
                <div className="tool-group">
                  <label>旋转: {imageTransform.rotate}°</label>
                  <input
                    type="range"
                    min="-180"
                    max="180"
                    step="1"
                    value={imageTransform.rotate}
                    onChange={(e) => handleRotateChange(parseInt(e.target.value))}
                  />
                </div>
                
                {/* 裁剪控制 */}
                <div className="tool-group">
                  <label>裁剪</label>
                  <div className="crop-controls">
                    <div className="crop-input">
                      <label>X: {Math.round(imageTransform.crop.x)}%</label>
                      <input
                        type="range"
                        min="0"
                        max="100"
                        value={imageTransform.crop.x}
                        onChange={(e) => handleCropChange({
                          ...imageTransform.crop,
                          x: parseInt(e.target.value)
                        })}
                      />
                    </div>
                    <div className="crop-input">
                      <label>Y: {Math.round(imageTransform.crop.y)}%</label>
                      <input
                        type="range"
                        min="0"
                        max="100"
                        value={imageTransform.crop.y}
                        onChange={(e) => handleCropChange({
                          ...imageTransform.crop,
                          y: parseInt(e.target.value)
                        })}
                      />
                    </div>
                    <div className="crop-input">
                      <label>宽度: {Math.round(imageTransform.crop.width)}%</label>
                      <input
                        type="range"
                        min="10"
                        max="100"
                        value={imageTransform.crop.width}
                        onChange={(e) => handleCropChange({
                          ...imageTransform.crop,
                          width: parseInt(e.target.value)
                        })}
                      />
                    </div>
                    <div className="crop-input">
                      <label>高度: {Math.round(imageTransform.crop.height)}%</label>
                      <input
                        type="range"
                        min="10"
                        max="100"
                        value={imageTransform.crop.height}
                        onChange={(e) => handleCropChange({
                          ...imageTransform.crop,
                          height: parseInt(e.target.value)
                        })}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            {/* 编辑器操作按钮 */}
            <div className="editor-actions">
              <button 
                className="cancel-btn"
                onClick={() => setShowImageEditor(false)}
              >
                取消
              </button>
              <button 
                className="apply-btn"
                onClick={applyTransform}
              >
                应用变换
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 背景编辑器弹窗 */}
      {showBackgroundEditor && selectedImage && (
        <div className="background-editor-modal">
          <div className="editor-content">
            <div className="editor-header">
              <h3>背景结合设置</h3>
              <button 
                className="close-btn"
                onClick={() => setShowBackgroundEditor(false)}
              >
                ✕
              </button>
            </div>
            
            <div className="editor-main">
              {/* 背景预览区域 */}
              <div className="background-preview">
                <div 
                  className="preview-container"
                  style={{
                    background: backgroundSettings.type === 'color' ? backgroundSettings.color : 
                              backgroundSettings.type === 'image' && backgroundSettings.image ? 
                              `url(${backgroundSettings.image})` :
                              backgroundSettings.type === 'template' && backgroundSettings.template ?
                              `url(${backgroundTemplates.find(t => t.id === backgroundSettings.template)?.url})` :
                              '#ffffff'
                  }}
                >
                  <img src={resultImage || ''} alt="抠图结果预览" className="preview-image" />
                  {backgroundSettings.type !== 'color' && (
                    <div className="background-overlay">
                      <span className="overlay-text">背景预览</span>
                    </div>
                  )}
                </div>
                <div className="preview-info">
                  <span className="info-badge">
                    {backgroundSettings.type === 'color' ? '纯色背景' : 
                     backgroundSettings.type === 'image' ? '图片背景' : '模板背景'}
                  </span>
                  <p>实时预览抠图结果与背景的结合效果</p>
                </div>
              </div>
              
              {/* 背景设置工具区域 */}
              <div className="editor-tools">
                {/* 背景类型选择 */}
                <div className="tool-group">
                  <label>背景类型</label>
                  <div className="background-type-selector">
                    <button 
                      className={`type-btn ${backgroundSettings.type === 'color' ? 'active' : ''}`}
                      onClick={() => handleBackgroundTypeChange('color')}
                    >
                      纯色背景
                    </button>
                    <button 
                      className={`type-btn ${backgroundSettings.type === 'image' ? 'active' : ''}`}
                      onClick={() => handleBackgroundTypeChange('image')}
                    >
                      图片背景
                    </button>
                    <button 
                      className={`type-btn ${backgroundSettings.type === 'template' ? 'active' : ''}`}
                      onClick={() => handleBackgroundTypeChange('template')}
                    >
                      模板背景
                    </button>
                  </div>
                </div>
                
                {/* 纯色背景设置 */}
                {backgroundSettings.type === 'color' && (
                  <div className="tool-group">
                    <label>背景颜色</label>
                    <input
                      type="color"
                      value={backgroundSettings.color}
                      onChange={(e) => handleBackgroundColorChange(e.target.value)}
                      className="color-picker"
                    />
                  </div>
                )}
                
                {/* 自定义图片背景设置 */}
                {backgroundSettings.type === 'image' && (
                  <div className="tool-group">
                    <label>上传背景图片</label>
                    <input
                      ref={backgroundImageRef}
                      type="file"
                      accept="image/*"
                      onChange={handleBackgroundImageUpload}
                      style={{ display: 'none' }}
                    />
                    <button 
                      className="upload-bg-btn"
                      onClick={() => backgroundImageRef.current?.click()}
                    >
                      选择背景图片
                    </button>
                    {backgroundSettings.image && (
                      <div className="bg-preview">
                        <img src={backgroundSettings.image} alt="背景预览" />
                      </div>
                    )}
                  </div>
                )}
                
                {/* 系统模板背景设置 */}
                {backgroundSettings.type === 'template' && (
                  <div className="tool-group">
                    <label>选择背景模板</label>
                    <div className="template-grid">
                      {backgroundTemplates.map(template => (
                        <div 
                          key={template.id}
                          className={`template-item ${backgroundSettings.template === template.id ? 'active' : ''}`}
                          onClick={() => handleBackgroundTemplateSelect(template.id)}
                        >
                          <img src={template.url} alt={template.name} />
                          <span>{template.name}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            </div>
            
            {/* 背景编辑器操作按钮 */}
            <div className="editor-actions">
              <button 
                className="cancel-btn"
                onClick={() => setShowBackgroundEditor(false)}
              >
                取消
              </button>
              <button 
                className="apply-btn"
                onClick={applyBackground}
              >
                应用背景
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 对比查看弹窗 */}
      {showComparison && mattingResult && (
        <div className="comparison-modal">
          <div className="comparison-content">
            <div className="comparison-header">
              <h3>图片对比</h3>
              <button 
                className="close-btn"
                onClick={() => setShowComparison(false)}
              >
                ✕
              </button>
            </div>
            
            <div className="comparison-main">
              <div className="comparison-item">
                <h4>原图</h4>
                <img src={mattingResult.originalImage} alt="原图" />
              </div>
              <div className="comparison-item">
                <h4>抠图结果</h4>
                <img src={mattingResult.processedImage} alt="抠图结果" />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * AI智能抠图组件
 * 
 * 功能特性：
 * 1. 支持多种图片上传方式（点击、拖拽、粘贴）
 * 2. 提供测试样例快速体验
 * 3. 两种抠图算法：高级AI抠图和快速背景扣除
 * 4. 图片编辑功能：缩放、旋转、裁剪
 * 5. 背景调整功能：纯色、自定义图片、系统模板
 * 6. 实时预览和对比查看
 * 7. 结果下载功能
 * 
 * 技术实现：
 * - 使用Canvas API进行图像处理
 * - 多种图像分析算法：边缘检测、颜色分析、纹理分析
 * - 形态学处理清理噪点
 * - 置信度计算评估处理质量
 * 
 * 算法说明：
 * - 高级AI抠图：结合边缘检测、颜色分析、纹理分析，精度高但速度较慢
 * - 快速背景扣除：基于颜色方差分析，速度快但精度较低
 * - 形态学处理：使用3x3邻域平滑操作清理噪点
 * - 置信度计算：基于前景像素比例和边缘清晰度
 */
export default Index;
